<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件夹上传</title>
</head>
<body>
<div>
    <h2>上传文件夹</h2>
    <input type="file" id="fileInput" name="file[]" multiple webkitdirectory directory  mozdirectory>
    <button onclick="uploadFiles()">上传文件夹</button>
    <p>
        需要选中文件夹上传
    </p>
</div>

<script>
    function uploadFiles() {
        var files = document.getElementById('fileInput').files;
        if (files==null||files.length==0){
            alert("请先选择文件夹");
            return;
        }
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }
        // 使用fetch API将formData发送到后端
        fetch('/upload/dir', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (!response.ok) {
                throw new Error('网络响应不正确');
            }
            return response.text();
        })
            .then(data => {
                console.log(data); // 从服务器返回的响应
                alert('文件上传成功！');
            })
            .catch(error => {
                console.error('上传过程中出现问题:', error);
                alert('上传文件时发生错误.');
            });
    }
</script>
</body>
</html>
